<template>
  <ElTree
    ref="treeRef"
    :data="groupData"
    :highlightCurrent="true"
    nodeKey="id"
    :props="{ label: 'name' }"
    :expandOnClickNode="false"
    :defaultExpandAll="true"
    class="file-picker-left"
    @node-click="handleGroupSelect"
    @node-contextmenu="handleGroupContextmenu"
  >
    <template #default="scope">
      <img
        src="/ele-file-list/ic_file_folder.png"
        class="file-picker-tree-icon"
      />
      <span class="el-tree-node__label" :title="scope.data.name">
        {{ scope.data.name }}
      </span>
      <ElIcon
        v-if="scope.data.id !== 0 && scope.data.id !== -1"
        class="file-picker-tree-more"
        @click.stop="(e) => handleMoreIconClick(e, scope.data)"
      >
        <MoreOutlined style="transform: scale(1.1)" />
      </ElIcon>
    </template>
  </ElTree>
  <ElLink
    type="primary"
    underline="never"
    class="file-picker-left-add"
    @click="handleAddBtnClick"
  >
    新增分组
  </ElLink>
</template>

<script setup>
import { MoreOutlined } from '@/components/icons'
import { queryChild } from 'ele-admin-plus/es'
import { ref } from 'vue'

defineProps({
  /** 分组数据 */
  groupData: Array,
})

const emit = defineEmits([
  'groupSelect',
  'addBtnClick',
  'moreIconClick',
  'hideGroupCtxMenu',
])

/** 树组件 */
const treeRef = ref(null)

/** 分组选中事件 */
function handleGroupSelect(item) {
  emit('groupSelect', item, true)
}

/** 新增分组按钮点击事件 */
function handleAddBtnClick() {
  emit('addBtnClick')
}

/** 更多图标点击事件 */
function handleMoreIconClick(e, item) {
  emit('moreIconClick', e.currentTarget, item)
}

/** 分组右键事件 */
function handleGroupContextmenu(e, item) {
  if (item.id === 0 || item.id === -1) {
    emit('hideGroupCtxMenu')
    return
  }
  const triggerEl = queryChild(
    e.currentTarget,
    'el-tree-node__content',
  )?.querySelector?.('.file-picker-tree-more')
  // @ts-ignore
  triggerEl && triggerEl.click()
}

/** 设置选中分组 */
function setSelectedGroup(item) {
  treeRef.value?.setCurrentKey?.(item.id)
}

defineExpose({ setSelectedGroup })
</script>
